<template>

  <div class="container">
    <h3 class="mb-4">商品展示</h3>
    <div class="row">

      <!--  遍历商品列表    -->

          <div v-for="item in goodslist" class="col-sm-6 col-md-3 col-product">
						<figure>
              <a :href="'/item?id='+item.id">{{item.name}}</a>
							<figcaption>
								<div class="thumb-overlay">
                  <a :href="'/item?id='+item.id" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
						</figure>
						<h4><a :href="'/item?id='+item.id">{{ item.name }}</a></h4>
            <h4 v-if="type==0"></h4>
						<h4 v-else><a :href="'/editgood?id='+item.id">修改商品</a></h4>
						<p><span class="emphasis">{{ item.price }}</span></p>
					</div>

    </div>
    <!--   自主分页   -->
    <br/><br/>
    <div>

      <a @click="getdata(lastpage)" v-show="lastpage">上一页</a>

      <ul>

        <li v-for="index in all">

          <a @click="getdata(index)">{{ index }}</a>
        </li>

      </ul>

      <a @click="getdata(nextpage)" v-show="nextpage">下一页</a>

    </div>

    <br/>
  </div>
</template>




<script>
    export default {
        name: "goodslist",
      data() {
      return {
        // 商品列表
      goodslist:[],

      // 自主分页
      total:0, //商品总数
      cur:1,//当前页
      all:0,//总页数
      lastpage:0,//上一页
      nextpage:0,//下一页
      size:2, //每页显示数量
      }
    },
    mounted() {

      // 调用自主分页接口
      this.getdata(1);

    },
    methods: {
      //自主分页接口
    getdata:function(page){ // page页码
      // 发送请求
        this.axios.get(
          'http://127.0.0.1:8000/goodslist/',{params:{page:page,size:this.size}}).then(res=>{
            console.log(res);
            this.goodslist = res.data.data;

            //判断上一页
            if(page === 1){
              this.lastpage = 0
            }else {
              this.lastpage = page - 1;
            }

            //计算总页数
            this.all = Math.ceil(res.data.total / this.size);

            //判断下一页
            if(page === this.all){
              this.nextpage = 0;
            }else {
              this.nextpage = page + 1;
            }
        });
    },
    }

    }
</script>

<style scoped>

</style>
